<template>
  <div>
    <el-card class="searchTop">
      <div class="orderInfo">订单信息: <span :style="refundCss">{{refundState}}</span> </div>
      <el-row type="flex" justify="start">
        <el-col :span="6">
          <span>订单编号:</span>
          <span style="margin-left: 10px">{{ list.orderSn }} <el-button style="margin-left:15px;" @click="goSeeOrder(list.orderId)" type="text">查看订单详情</el-button></span>
        </el-col>
        <el-col :span="6">
          <span>退单人姓名:</span>
          <span style="margin-left: 10px">{{ list.returnName }}</span>
        </el-col>
        <el-col :span="6">
          <span>退单理由:</span>
          <span style="margin-left: 10px">{{ list.reason }}</span>
        </el-col>
        <el-col :span="6">
          <span>退单描述:</span>
          <span style="margin-left: 10px">{{ list.description }}</span>
        </el-col>
      </el-row>


      <el-row type="flex" justify="start">
        <el-col :span="6">
          <span>申请时间:</span>
          <span style="margin-left: 10px">{{ list.createTime }}</span>
        </el-col>
      </el-row>

      <el-row type="flex" justify="start" style="margin-top:15px;">
        <el-col :span="6">
          <span>退单图片:</span>
          <img style="vertical-align:top;margin-left: 10px" width="100" height="100" v-for="(item,index) in list.proofPics" :key="index" :src="item" alt="">
        </el-col>
      </el-row>

      <div class="el-deliver"></div>

      <!-- 退货商品 -->
      <div class="orderInfo">退货商品:</div>

        <el-table
          :data="proList"
          border
          style="width: 100%">
          <el-table-column
            label="商品图片"
            align="center"
            width="180">
            <template slot-scope="scope">
              <img style="width:100px;height:100px;" :src="scope.row.productPic" alt="">
            </template>
          </el-table-column>

          <el-table-column
            label="商品描述"
            align="center"
            width="180">
            <template slot-scope="scope">
              <p>{{scope.row.productName}}</p>
              <p>品牌:{{scope.row.productBrand}}</p>
            </template>
          </el-table-column>

          <el-table-column
            prop="productPrice"
            align="center"
            label="商品价格">
          </el-table-column>

          <el-table-column
            align="center"
            label="商品属性">
            <template slot-scope="scope">
              <span v-for="(item,index) in scope.row.productAttr" :key="index">{{item.key}}:{{item.value}} </span>
            </template>
          </el-table-column>

          <el-table-column
            prop="productCount"
            align="center"
            label="商品数量">
          </el-table-column>

          <el-table-column
            prop="returnAmount"
            align="center"
            label="总计">
          </el-table-column>
        </el-table>

      <!-- 用户信息 -->
      <div class="orderInfo">用户信息:</div>

      <el-row type="flex" justify="start">
        <el-col :span="6">
          <span>联系人:</span>
          <span style="margin-left: 10px">{{ list.returnName }}</span>
        </el-col>
        <el-col :span="6">
          <span>联系电话:</span>
          <span style="margin-left: 10px">{{ list.returnPhone }}</span>
        </el-col>
      </el-row>

      <div class="el-deliver"></div>

      <!-- 费用信息 -->
      <div class="orderInfo">费用信息:</div>

      <el-row type="flex" justify="start">
        <el-col :span="6">
          <span>退单金额:</span>
          <span style="margin-left: 10px">{{ list.productRealPrice }}</span>
        </el-col>
        <el-col :span="6">
          <span>运费金额:</span>
          <span style="margin-left: 10px">0</span>
        </el-col>
      </el-row>

      <!-- 待处理状态 -->
      <div v-if="list.status=='0'" style="margin-top:20px;">
        
          <el-form ref="form" :rules="rules" :model="ruleForm" :inline="true">
            <el-row :gutter="20" type="flex" justify="start">
              <el-col :span="6">
                <el-form-item label="退款金额:">
                  <el-input-number style="width:130%" size="mini" v-model="ruleForm.returnAmount"></el-input-number>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="处理人:" prop="handleMan">
                  <el-input size="mini" v-model="ruleForm.handleMan"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="处理备注:" prop="handleNote">
                  <el-input size="mini" v-model="ruleForm.handleNote"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <div class="refund_button">
              <el-button type="primary" size="medium" @click="isRefund(ruleForm)">同意退款</el-button>
              <el-button size="medium" @click="noRefund(ruleForm)">拒绝退款</el-button>
            </div>

          </el-form>
      
      </div>



      <div class="el-deliver" v-if="list.status>'0'"></div>

      <!-- 处理结果 -->
      <div v-if="list.status>'0'" style="padding-bottom:50px;">
        <div class="orderInfo">处理结果:</div>

        <el-row type="flex" justify="start">
          <el-col :span="6">
            <span>处理人:</span>
            <span style="margin-left: 10px">{{ list.handleMan }}</span>
          </el-col>
          <el-col :span="6">
            <span>处理备注:</span>
            <span style="margin-left: 10px">{{list.handleNote}}</span>
          </el-col>
          <el-col :span="6">
            <span>处理时间:</span>
            <span style="margin-left: 10px">{{list.handleTime}}</span>
          </el-col>
        </el-row>
      </div>

      <!-- 退货中状态 -->
      <div v-if="list.status=='1'" style="margin-top:20px;">
         <el-form :rules="rules" :model="refundingForm" :inline="true">
            <el-row :gutter="20" type="flex" justify="start">
              <el-col :span="6">
                <el-form-item label="收货人:" prop="receiveMan">
                  <el-input style="width:150%;" size="mini" v-model="refundingForm.receiveMan"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="收货备注:" prop="receiveNote">
                  <el-input style="width:150%;" size="mini" v-model="refundingForm.receiveNote"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <div class="refund_button">
              <el-button type="primary" size="medium" @click="getProduct(refundingForm)">确认收货</el-button>
            </div>

          </el-form>
      </div>

      <div class="el-deliver" v-if="list.status=='2'"></div>

      <!-- 收货信息 -->
      <div v-if="list.status=='2'" style="padding-bottom:50px;">
        <div class="orderInfo">收货信息:</div>

        <el-row type="flex" justify="start">
          <el-col :span="6">
            <span>退货收货人:</span>
            <span style="margin-left: 10px">{{ list.receiveMan }}</span>
          </el-col>
          <el-col :span="6">
            <span>退单收货备注:</span>
            <span style="margin-left: 10px">{{list.receiveNote}}</span>
          </el-col>
          <el-col :span="6">
            <span>退单收货时间:</span>
            <span style="margin-left: 10px">{{list.receiveTime}}</span>
          </el-col>
        </el-row>
      </div>
    </el-card>
  </div>
</template>

<script>
import {orderReturn,agreeApply,rejectApply,receiveProduct} from '@/api/order/quitList';
export default {
  data(){
    return{
      //接收的id
      id:'',
      //退单明细
      list:[],
      //退货商品列表数据
      proList:[],
      //订单信息边的状态
      refundState:'',
      //订单信息边的状态css样式
      refundCss:{
        display:'inline-block',
        width:"56px",
        height:"22px",
        lineHeight: "22px",
        padding: "0 8px",
        borderWidth: "1px",
        borderStyle: "solid",
        borderRadius: "4px",
        fontSize: "12px",
        backgroundColor: '#f4f4f5',
        borderColor: '#e9e9eb',
        color: '#909399',
        marginLeft:'10px'
      },
      //待处理时表单
      ruleForm:{
        //处理人
        handleMan:'',
        //处理备注
        handleNote:'',
        // 处理金额
        returnAmount:''
      },
      //退货中表单
      refundingForm:{
        //收货人
        receiveMan:'',
        //收货备注
        receiveNote:''
      },
      //待处理时表单验证
      rules: {
          handleMan: [
            { required: true, message: '请输入处理人', trigger: 'blur' },
          ],
          handleNote: [
            { required: true, message: '请输入处理金额', trigger: 'blur' },
          ],
          receiveMan: [
            { required: true, message: '请输入收货人', trigger: 'blur' },
          ],
          receiveNote: [
            { required: true, message: '请输入收货备注', trigger: 'blur' },
          ],
      },
      
    }
  },
  created(){
    this.id = this.$route.query.id
    this.getData()
  },
  methods:{
    // 获取退单明细
    getData(){
      orderReturn(this.id).then(res=>{
        console.log(res);
        res.data.orderReturnApply.proofPics = res.data.orderReturnApply.proofPics.split(',')
        res.data.orderReturnApply.productAttr = JSON.parse(res.data.orderReturnApply.productAttr)
        this.proList = [res.data.orderReturnApply]
        this.list = res.data.orderReturnApply
        if(this.list.status==0){
          this.refundState="待处理"
          this.refundCss.backgroundColor="#f56c6c"
          this.refundCss.borderColor='#f56c6c'
          this.refundCss.color='#fff'
        }else if(this.list.status==1){
          this.refundState="退货中"
          this.refundCss.backgroundColor="#e6a23c"
          this.refundCss.borderColor='#e6a23c'
          this.refundCss.color='#fff'
        }else if(this.list.status==2){
          this.refundState="已完成"
          this.refundCss.backgroundColor="#d9ecff"
          this.refundCss.borderColor='#d9ecff'
          this.refundCss.color='#409eff'
        }else if(this.list.status==3){
          this.refundState="已拒绝"
          this.refundCss.backgroundColor="#f56c6c"
          this.refundCss.borderColor='#f56c6c'
          this.refundCss.color='#fff'
        }
      })
    },
    //查看订单详情跳转
    goSeeOrder(val){
      this.$router.push({name:"SeeOrder",query:{id:val}})
    },
    //同意退款
    isRefund(val){
      agreeApply(this.id,{
        id:this.id,
        handleMan:val.handleMan,
        handleNote:val.handleNote,
        returnAmount:val.returnAmount
      }).then(res=>{
        console.log(res);
      })
      this.$router.push({name:"QuitList"})
    },
    //拒绝退款
    noRefund(val){
      rejectApply(this.id,{
        id:this.id,
        handleMan:val.handleMan,
        handleNote:val.handleNote,
        returnAmount:val.returnAmount
      }).then(res=>{
        console.log(res);
      })
      this.$router.push({name:"QuitList"})
    },
    //确认收货
    getProduct(val){
      receiveProduct(this.id,{
        id:this.id,
        receiveMan:val.receiveMan,
        receiveNote:val.receiveNote
      }).then(res=>{
        console.log(res);
      })
      this.$router.push({name:"QuitList"})
    }
  }
}
</script>

<style lang="scss">
.el-form-item__label{
  font-size: 16px;
  font-weight: 400;
}
</style>
<style lang="scss" scoped>
// 小标题
.orderInfo {
  color: rgba(0, 0, 0, 0.85);
  font-weight: 700;
  font-size: 16px;
  margin: 20px 0;
  
}
//分割线
.el-deliver {
  display: block;
  height: 1px;
  width: 100%;
  margin: 24px 0;
  background-color: #dcdfe6;
}
.refund_button{
  text-align: center;
}
</style>